<template>
	<view class="route-info flex--col">
		<view class="route-spots flex--col">
			<view class="route-spot flex--row" v-for="(spot,index) in routeInfo.routeAttractionsList" :key="index">
				<view class="route-spot-main">
					<image :aria-label="'第'+index+1+'站'" :src="`/static/numbers/${index+1}.svg`"></image>
					<text class="text--secondary-dark">{{ spot.name }}</text>
				</view>
				<text class="route-spot-desc text--thirdary-dark">
					{{ description }}
				</text>
			</view>
		</view>
		<view class="route-keydata flex--row  text--thirdary-dark">
			<view class="keydata" :aria-label="'出行花费'+routeInfo.amount+'元'">
				<image aria-label="出行花费" src="@/static/coin.svg" class="icon--small"></image>
				<text>{{routeInfo.amount}}元</text>
			</view>
			<view class="keydata" :aria-label="'出行距离'+routeInfo.distance+'千米'">
				<image aria-label="出行距离" src="@/static/distance.svg" class="icon--small"></image>
				<text>{{routeInfo.distance}}km</text>
			</view>
			<view class="keydata" :aria-label="'出行时长'+routeInfo.time+'小时'">
				<image aria-label="出行时长" src="@/static/time.svg" class="icon--small"></image>
				<text>{{routeInfo.time}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import * as RouteApi from "@/api/route/route.js"
	export default{
		props:['routeInfo'],
		computed:{
			description(){
				return this.routeInfo.description ?? "无标注"
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 26px;
		font-weight: 700;
		color:#555;
	}
	
	.text--secondary-dark{
		font-size: 18px;
		font-weight: 700;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		font-weight: 500;
		color:#666;
	}
	
	.route-info{
		height:100%;
		.route-spots{
			gap:48rpx;
			margin-bottom: 64rpx;
		}
		
		.route-spot{
			justify-content: space-between;
			align-items: center;
			
			.route-spot-main{
				display: flex;
				align-items: center;
				gap:4px;
				
				text{
					width:80%;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
				image{
					width:28px;
					height:28px;
				}
			}
		
			.route-spot-desc{
				white-space: nowrap;
				overflow:hidden;
				text-overflow: ellipsis;
			}
		}
		
		.route-keydata{
			margin-top:auto;
			gap:16rpx;
			justify-content: flex-end;
			
			.keydata image{
				line-height: 18px;
				vertical-align: middle;
			}
		}
	}
	
</style>